<template>
  <div
    class="carousel"
    @mouseenter="mouseenterHandle"
    @mouseleave="mouseleaveHandle"
  >
    <transition-group name="o">
      <span
        class="iconfont icon-xiangzuojiantou"
        :class="left == true ? 'lefts' : 'left'"
        @click="currentIndexHandle(-1)"
        v-if="hasDirector && hasDirectors"
      ></span>
      <span
        class="right iconfont icon-xiangyoujiantou"
        @click="currentIndexHandle(1)"
        v-if="hasDirector && hasDirectors"
      ></span>
    </transition-group>
    <div class="inner">
      <slot></slot>
    </div>
    <ul>
      <li
        v-for="(item, index) in 5"
        :key="item"
        :class="index == currentIndex ? 'active' : ''"
        @click="currentIndex = index"
      ></li>
    </ul>
  </div>
</template>
 <script>
/* onMounted   组件挂载之后 */
/* onBeforeUnmount   组件卸载之前 */
import {
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";
export default {
  name: "Carousel",
  props: {
    autoplay: {
      type: Boolean,
      default: true,
    },
    duration: {
      type: Number,
      default: 3000,
    },
    initial: {
      type: Number,
      default: 0,
    },
    hasDot: {
      type: Boolean,
      default: true,
    },
    hasDirector: {
      type: Boolean,
      default: true,
    },
    left: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const instance = getCurrentInstance();
    const state = reactive({
      /* 获取初识的第几张图 */
      currentIndex: props.initial,
      itemLen: 0,
      // 箭头是否显示
      hasDirectors: false,
    });
    // 鼠标移入事件

    const mouseenterHandle = () => {
      state.hasDirectors = true;
      clearInterval(t);
      t = null;
    };
    // 鼠标移入事件
    const mouseleaveHandle = () => {
      state.hasDirectors = false;
      autoplay();
    };
    // 点击左右箭头事件
    const currentIndexHandle = (i) => {
      state.currentIndex += i;
      if (state.currentIndex === state.itemLen) {
        state.currentIndex = 0;
      }
      if (state.currentIndex === -1) {
        state.currentIndex = state.itemLen - 1;
      }
    };
    /* 声明一个计时器 */
    let t = null;
    const autoplay = () => {
      if (props.autoplay) {
        t = setInterval(() => {
          //   console.log(1);
          setIndex("next");
        }, props.duration);
      }
    };
    const setIndex = (dir) => {
      switch (dir) {
        case "next":
          state.currentIndex += 1;
          if (state.currentIndex === state.itemLen) {
            state.currentIndex = 0;
          }
          break;
        case "prev":
          state.currentIndex -= 1;
          if (state.currentIndex === -1) {
            state.currentIndex = state.itemLen - 1;
          }
          break;
        default:
          break;
      }
    };
    setTimeout(() => {
      state.itemLen = instance.slots.default()[0].children.length;
    }, 500);
    onMounted(() => {
      state.itemLen = instance.slots.default()[0].children.length;
      autoplay();
    });
    onBeforeUnmount(() => {
      clearInterval(t);
      t = null;
    });
    return {
      ...toRefs(state),
      mouseenterHandle,
      mouseleaveHandle,
      currentIndexHandle,
    };
  },
};
</script>
<style lang="scss" scoped>
.carousel {
  width: 100%;
  height: 100%;
  position: relative;
  .inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
    &.left {
      left: 20px;
    }
    &.right {
      right: 20px;
    }
    &.lefts {
      left: 270px;
    }
  }
  ul {
    position: absolute;
    bottom: 20px;
    left: 50%;
    display: flex;
    transform: translateX(-50%);
    li {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: rgba(158, 158, 158, 0.315);
      margin-left: 12px;
      cursor: pointer;
      &.active {
        background-color: #fff;
      }
    }
  }
}
.o-enter-active,
.o-leave-active {
  transition: opacity 0.3s linear;
}
/* 定义进入过渡生效时的状态 */
.o-enter-active {
  opacity: 0;
}
/* 定义进入过渡的结束状态 */
.o-enter-to {
  opacity: 1;
}
/* 定义离开过渡的开始状态 */
.o-leave-active {
  opacity: 1;
}
/* 定义离开过渡的结束状态 */
.o-leave-to {
  opacity: 0;
}
</style>